<template>
	<view class="ys">
		<view class="list">
			<view class="item" v-for="(item,index) in infoList" :key="index" @click="toPage('./detail?id='+item.id)">
				<view class="title">
					<uni-icons class="icon" type="calendar" color="#1989fa" size="20"></uni-icons>
					{{item.order_no}}
				</view>
				<view class="box" v-if="item.activity_info">
					<view class="imgbox">
						<image :src="item.activity_info.cover_path" mode=""></image>
					</view>
					<view class="infobox">
						<view class="name">
							{{item.activity_info.name}}
						</view>
						<view class="time">
							预约时间 : {{item.conf.date}}
						</view>
						<view class="time">
							时间段 : {{item.conf.start_time}}~{{item.conf.end_time}}
						</view>
					</view>
				</view>
			</view>
			<view class="no-list" v-if="infoList.length == 0">
				- 暂无数据 -
			</view>
		</view>
	</view>
</template>

<script>
	import {
		appointLst
	} from "@/api/api.js"
	export default {
		data() {
			return {
				infoList: [],
				page: 1,
				last_page: 1,
			}
		},
		onShow() {
			this.infoList = []
			this.page = 1
			this.appointLst()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.appointLst()
			}
		},
		methods: {
			appointLst() {
				appointLst({
					page: this.page
				}).then(res => {
					if (res.status == 1) {
						this.infoList = this.infoList.concat(res.data.data)
						this.last_page = res.data.last_page
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding: 10px 0;
	}

	.list {
		padding: 0 10px;

		.item {
			background: #fff;
			border-radius: 8px;
			font-size: 14px;
			margin-bottom: 10px;

			.title {
				display: flex;
				align-items: center;
				padding: 10px;
				border-bottom: 1px solid #eee;
				font-weight: bold;

				.icon {
					margin-right: 5px;
				}
			}

			.box {
				padding: 10px;
				display: flex;

				.imgbox {
					width: 40%;
					height: 100px;

					image {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}
				}

				.infobox {
					width: 60%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding: 5px 0;
					padding-left: 10px;

					.name {
						font-weight: bold;
					}

					.time {
						font-size: 13px;
						color: #777;
					}
				}
			}
		}
	}
</style>